<template>
  <div class="task-item">
    <h3>{{ record.taskname }}</h3>
    <p>发布时间：{{ record.createon }}</p>
    <p>任务批次：{{ record.year ?? '' }}-{{ record.pch ?? '' }}</p>
    <div class="btns">
      <div>总任务数：{{ record?.zcount || 0 }}</div>
      <div>已完成：{{ record?.yhy || 0 }}</div>
      <div>未完成：{{ record?.why || 0 }}</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  record: {
    type: Object,
    default: () => {},
  }
})
</script>

<style scoped lang="less">
  .task-item {
    margin: 0 32px 24px;
    padding: 24px 32px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, .14);
    border-radius: 8px;
    background: #fff;
    h3 {
      margin-bottom: 22px;
    }
    p {
      color: var(--time-color);
    }
    .btns {
      display: flex;
      justify-content: flex-end;
      border-top: 2px solid var(--border-color);
      margin-top: 24px;
      padding-top: 20px;
      div {
        white-space: nowrap;
        height: 50px;
        line-height: 50px;
        padding: 0 0 0 24px;
        &:nth-last-of-type(1) {
          color: var(--van-primary-color);
        }
      }
    }
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 20px;
      &:nth-child(1) {
        font-size: 32px;
      }
    }
  }
</style>
